<script setup lang="ts">
interface IProps {
  loading: boolean
  type?: 'loading' | 'skeleton'
  empty?: boolean
}
withDefaults(defineProps<IProps>(), {
  loading: false,
  type: 'loading',
  empty: false,
})
</script>

<template>
  <div>
    <template v-if="loading">
      <slot name="template">
        <div v-if="type === 'loading'" class="gp__tblr-center gp__flex-center">
          <a-spin tip="Loading..." />
        </div>
        <div v-if="type === 'skeleton'" style="padding: 20px 10px">
          <a-skeleton active :row="5" />
          <a-skeleton active :row="5" />
          <a-skeleton active :row="5" />
        </div>
      </slot>
    </template>
    <template v-else-if="empty">
      <a-empty class="gp__hv-center gp__flex-center gp__flex-column" />
    </template>
    <template v-else>
      <slot name="default" />
    </template>
  </div>
</template>
